<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- :show-before="true" 简写,表示显示before这个具名插槽 -->
      <PageTools show-before>
        <span slot="before">共{{ Query.total }}条记录</span>
        <template slot="after">
          <el-button type="danger" size="small" @click="exportData">普通excel导出</el-button>
          <el-button type="info" size="small" @click="exportData(isComplex=true)">复杂表头excel导出</el-button>
          <el-button type="success" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="primary" size="small" @click="showdialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-button type="text" size="small" @click="alldel">无限删除</el-button>
      <el-table :data="data" border>
        <!-- :data="[{},{}]"定义几个空数据,渲染下表格进行测试 -->
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="头像" width="125">
          <template v-slot="{row}">
            <img
              v-imgerror="require('@/assets/common/head.jpg')"
              :src="row.staffPhoto "
              style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
              alt=""
              @click="showCode(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="EmployeeEnum" />
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry">
          <template v-slot="{row}">
            {{ row.timeOfEntry|formatDate("yyyy/MM/dd") }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" prop="enableState">
          <template v-slot="{ row }">
            <!-- 没有值 -->
            <!-- 用switch组件 enable等于1 表示当前用户是ok的 否则状态是没设置的-->
            <el-switch :value="row.enableState === 1" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
            <el-button type="text" size="small" :disabled="!checkPermission('del-user')" @click="delemployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">

        <!-- 分页符 -->
        <el-pagination
          :current-page="Query.page"
          :page-size="Query.size"
          layout="total, prev, pager, next"
          :total="Query.total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>

    <!-- 图片头像二维码弹窗 -->
    <el-dialog :visible.sync="showCodeDialog" title="扫码预览头像">
      <el-row type="flex" justify="center">
        <canvas ref="codeImg" />
      </el-row>
    </el-dialog>

    <!-- 新增员工弹层组件 -->
    <diaLog :showdialog.sync="showdialog" />

    <!-- 角色管理弹层组件 -->
    <assignRole ref="assignRole" :show-role.sync="showRole" :user-id="userId" />
  </div>
</template>

<script>
import { getemployeeList, delemployee } from '@/api/employees'
import EmployeeEnum from '@/api/constant/employees'
import diaLog from './components/dialog.vue'
import { formatDate } from '@/filters'
import QrCode from 'qrcode'
import assignRole from './components/assign-role'
export default {
  components: {
    diaLog,
    assignRole
  },
  data() {
    return {
      Query: {
        page: 1, // 当前页马数
        size: 10, // 每页显示条目数
        total: 0
      },
      data: [], // 表格数据
      showdialog: false, // 新增弹窗
      showCodeDialog: false, // 二维码弹窗
      showRole: false, // 角色弹窗
      userId: null // 记录当前选中员工id
    }
  },
  created() {
    // 初始化员工列表
    this.getemployeeList()
  },
  methods: {
    // 封装获取员工列表的方法
    async getemployeeList() {
      const res = await getemployeeList(this.Query)
      // console.log(res)
      this.data = res.rows
      this.Query.total = res.total
    },
    // 分页切换
    handleCurrentChange(newPage) {
      this.Query.page = newPage
      this.getemployeeList()
    },
    // 格式化聘用方式
    EmployeeEnum(row, column, cellValue, index) {
      const obj = EmployeeEnum.hireType.find(item => +item.id === +cellValue) // find寻找对应的数据并导出
      return obj ? obj.value : '未知'
    },
    // 删除员工
    async delemployee(id) {
      try {
        await this.$confirm('您确定删除该员工吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delemployee(id)
        if (this.Query.page > 1 && this.data.length === 1) { // 添加一个防空判断,当前页删除完成后跳转上一页
          this.Query.page--
        }
        this.getemployeeList()
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 无限删除
    async alldel() {
      await this.delemployee(this.data[5].id)
      this.alldel()
    },
    // 简单导出excel数据
    exportData(isComplex) {
      // 表头对应关系
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 懒加载--因为依赖比较大,导入完成后进行加载
      import('@/vendor/Export2Excel').then(async excel => {
        // 令当前页导出数据为总数,以导出所有数据
        const { rows } = await getemployeeList({ page: 1, size: this.Query.total })
        // 将数据类型[{},{}]转换为[[],[]]
        const data = this.formatJson(headers, rows)
        const merges = isComplex ? ['A1:A2', 'B1:F1', 'G1:G2'] : []
        const multiHeader = isComplex ? [['姓名', '主要信息', '', '', '', '', '部门']] : []
        excel.export_json_to_excel({
          header: Object.keys(headers), // 导出表格表头['',''] 必填
          merges, // 合并选项
          multiHeader, // 复杂表头
          data, // 导出表格数据[[],[]] 必填
          filename: '员工信息表', // 导出表格文件名 非必填 默认excel-list
          autoWidth: true, // 是否自适应表格宽度 非必填 默认true
          bookType: 'xlsx'// 文件类型 非必填 默认xlsx
        })
      })
    },
    // 格式化json数据-将数据类型[{},{}]转换为[[],[]]
    formatJson(headers, rows) {
      // 对第一层的数组进行遍历
      // {
      //             "id": "604f764971f93f3ac8f365c2",
      //             "mobile": "13800000002",
      //             "username": "管理员3",
      //             "password": "e10adc3949ba59abbe56e057f20f883e",
      //             "timeOfEntry": "2018-11-02",
      //             "formOfEmployment": 1,
      //             "workNumber": "9002",
      //             "correctionTime": "2018-11-30",
      //             "departmentName": "总裁办",
      //             "staffPhoto": "http://q6cu3t6jv.bkt.clouddn.com/1063705989926227968?t=1616204161907"
      //         }
      // 转化成
      // ["604f764971f93f3ac8f365c2","13800000002", "管理员3"]
      // [[],[],[]]
      return rows.map(item => {
        //   Object.values(headers) ['username', 'mobile', 'formOfEmployment']
        // ["604f764971f93f3ac8f365c2","13800000002", "管理员3"]
        return Object.values(headers).map(value => {
          // 此时value就是 字段名
          // item[value] 对应的就是 13800000002 -管理员3 -2018-11-02
          // 需要针对几个字段处理- 聘用形式
          if (value === 'formOfEmployment') {
            // 当字段为聘用形式时 需要知道其值所对应的真的文本
            const obj = EmployeeEnum.hireType.find(o => (o.id + '') === (item[value] + ''))
            // 寻找聘用形式对应的文本内容
            return obj ? obj.value : '未知'
          } else if (value === 'timeOfEntry' || value === 'correctionTime') {
            // 当字段是日期时
            return formatDate(item[value])
          }
          return item[value]
        })
      })
    },
    // 二维码预览图像
    showCode(url) {
      // 判断是否有图片,有则转换二维码,否则弹窗警告没有头像
      if (url) {
        this.showCodeDialog = true
        // QrCode.toCanvas(dom, info)// 将地址转化成二维码 //dom为一个canvas的dom对象， info为转化二维码的信息
        // QrCode.toCanvas(this.$refs.codeImg, url)// 因为页面的渲染是异步的,所以此操作可能获取不到dom,导致不加载,所以加一个异步处理
        this.$nextTick(() => QrCode.toCanvas(this.$refs.codeImg, url))
      } else {
        this.$message.warning('该用户未上传头像!')
      }
    },
    // 角色权限弹层
    editRole(id) {
      this.userId = id
      this.$refs.assignRole.getUserDetailById(id) // 调用子组件方法
      this.showRole = true
    }
  }
}
</script>

<style>

</style>
